<template>
  <div class="sharelnfo">
    <hm-nav-bar :path="path"></hm-nav-bar>
    <div class="content">
      <h3 class="title">{{ info.title }}</h3>
      <ul class="other">
        <li class="o1">{{ info.updated_at | formatTime }}</li>
        <li class="o2 iconfont">&#xe644;</li>
        <li class="o3">{{ info.read }}</li>
        <li class="o4 iconfont">&#xe638;</li>
        <li class="o5">{{ info.star }}</li>
      </ul>
      <div class="text" v-html="info.content"></div>
    </div>
    <!-- 评论 -->
    <div class="line"></div>
    <div class="comment">
      <div class="comment-title">
        评论<span>{{ this.total }}</span>
      </div>
      <!-- 上拉加载 van-list
        v-model：是否处于加载中，true：加载中，false：不处于加载中
        finished：是否加载完成
        finished-text：加载完成后的文本提示
        @load="load" (滚动条距离底部小于300自动触发，自动触发时，它会将v-model的值变为true，接口调用完成1：又将v-model的值变成false 2:判断是否加载完成)
       -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了亲(づ￣3￣)づ╭❤～"
        @load="load"
      >
        <div class="comment-item" v-for="(item, index) in list" :key="index">
          <div class="item-top">
            <img
              @click="reComment(item)"
              :src="$baseUrl + item.author.avatar"
              alt=""
              class="c1"
              v-if="item.author.avatar"
            />
            <img
              src="@/assets/logo.png"
              alt=""
              class="c1"
              v-else
              @click="reComment(item)"
            />
            <div class="c2">
              <div class="top">{{ item.nickname }}</div>
              <div class="bottom">{{ item.updated_at | formatTime }}</div>
            </div>
            <div
              @click="CommentsStar(item)"
              class="c3"
              :class="{
                red:
                  userInfo.starComments &&
                  userInfo.starComments.includes(+item.id)
              }"
            >
              {{ item.star }}
            </div>
            <i
              @click="CommentsStar(item)"
              class="iconfont"
              :class="{
                red:
                  userInfo.starComments &&
                  userInfo.starComments.includes(+item.id)
              }"
              >&#xe638;</i
            >
          </div>
          <div class="item-content">{{ item.content }}</div>
          <div class="item-recomment" v-if="item.children_comments.length">
            <div
              class="recomment"
              v-for="(item2, index2) in item.children_comments"
              :key="index2"
            >
              <span class="name">{{ item2.author }}:</span>
              <span class="text">{{ item2.content }}</span>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <!-- 发送评论 -->
    <div class="footer">
      <div class="send-comment">
        <div class="f1" @click="sendComment">
          说点什么吧......
        </div>
        <div
          @click="CollectEvent"
          class="f2"
          :class="{
            red: gettersTate('collectArticles', +id)
          }"
        >
          <div class="iconfont">&#xe649;</div>
          <div class="num">{{ info.collect }}</div>
        </div>
        <div
          @click="StarEvent"
          class="f2"
          :class="{
            red: gettersTate('starArticles', +id)
          }"
        >
          <div class="iconfont">&#xe638;</div>
          <div class="num">{{ info.star }}</div>
        </div>
        <div class="f2">
          <div class="iconfont">&#xe63e;</div>
          <div class="num">{{ info.share }}</div>
        </div>
      </div>
    </div>
    <!-- 底部弹框 -->
    <van-popup v-model="showComment" position="bottom">
      <div class="comment-txt">
        <van-field
          v-model="inputValue"
          placeholder="说点什么吧"
          type="textarea"
          rows="4"
        ></van-field>
        <div class="comment-send">
          <span
            v-if="this.inputValue !== ''"
            class="comment-btn red"
            @click="send"
            >发送</span
          >
          <span v-else class="comment-btn" @click="send">发送</span>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {
  ArticlesShareId,
  ArticlesCommentsId,
  articlesComments,
  articlesCollect,
  articlesStar,
  articleCommentsStar
} from '@/api/find.js'
import { mapState, mapGetters } from 'vuex'
export default {
  data () {
    return {
      id: this.$route.params.id,
      path: this.$route.query.path,
      info: '', // 面经详情的数据
      finished: false, // 是否加载完成
      loading: false, // 是否处于加载中
      list: [], // 保存评论列表数据
      currPage: 1, // 页码
      PageSize: 3, // 页容量
      total: 0, // 评论总数
      inputValue: '', // 弹框输入框
      showComment: false,
      parent: '', // 回复评论
      parentObj: ''
    }
  },
  async created () {
    const res = await ArticlesShareId(this.id)
    // 保存数据
    this.info = res.data.data
  },
  // 通过watch解决只要关闭弹窗就清空输入框的内容
  watch: {
    showComment (newVal) {
      if (!newVal) {
        this.inputValue = ''
      }
    }
  },
  methods: {
    async load () {
      const res2 = await ArticlesCommentsId(this.id, {
        start: (this.currPage - 1) * this.PageSize,
        limit: this.PageSize
      })
      console.log(res2)
      // 将评论列表总数单独渲染出来
      this.total = res2.data.data.total
      // 将列表数据累加到数组
      this.list.push(...res2.data.data.list)
      // 页码++
      this.currPage++
      // 将loading变成false
      this.loading = false
      // 判断是否加载完成 就把是否加载完成改为true
      if (this.list.length >= res2.data.data.total) {
        this.finished = true
      }
    },
    // 点击发送评论
    sendComment () {
      // 点击发表评论是让parent为空
      this.parent = ''
      this.showComment = true
    },

    // 发送 点击发送调用api发送请求 完成评论
    async send () {
      const res = await articlesComments({
        content: this.inputValue,
        article: this.id,
        parent: this.parent
      })
      // 关闭弹窗
      this.showComment = false
      console.log(res)
      // 如果是回复评论就加数据到相应的children_comments内
      // 如果是发表评论就添加到list
      if (this.parent === '') {
        res.data.data.star = 0
        this.list.unshift(res.data.data)
      } else {
        this.parentObj.children_comments.push(res.data.data)
      }
      console.log('发表评论', res.data.data)
    },
    // 点击头像回复评论
    reComment (item) {
      console.log('item', item)
      // 1:点击头像打开弹窗
      this.showComment = true
      // 2:存储当前点击项的id到parent
      this.parent = item.id
      // 3: 存储整个item对象
      this.parentObj = item
    },
    // 收藏按钮
    async CollectEvent () {
      const res = await articlesCollect({ id: this.id })
      if (res.data.data.list.includes(+this.id)) {
        // 提示用户收藏成功
        this.$toast.success('收藏成功')
      } else {
        this.$toast.fail('取消收藏')
      }
      // 调用接口成功更新收藏 总数
      this.info.collect = res.data.data.num
      // 刷新vuex中的userlnfo，更新状态
      this.$store.dispatch('refreshUserInfo')
    },
    // 点赞按钮
    async StarEvent () {
      const res = await articlesStar({ article: this.id })

      if (res.data.data.list.includes(+this.id)) {
        // 提示用户收藏成功
        this.$toast.success('点赞成功')
      } else {
        this.$toast.fail('取消点赞')
      }
      // 调用接口成功更新收藏 总数
      this.info.star = res.data.data.num
      // 刷新vuex中的userlnfo，更新状态
      this.$store.dispatch('refreshUserInfo')
      console.log('点赞', res)
    },
    // 评论点赞
    async CommentsStar (item) {
      const res = await articleCommentsStar({ id: item.id })
      if (res.data.data.list.includes(+item.id)) {
        // 提示用户点赞成功
        this.$toast.success('点赞成功')
      } else {
        this.$toast.fail('取消点赞')
      }
      // 调用接口成功更新点赞 总数
      item.star = res.data.data.num
      // 刷新vuex中的userlnfo，更新状态
      this.$store.dispatch('refreshUserInfo')
    }
  },
  // 计算属性
  computed: {
    ...mapState(['userInfo']),
    ...mapGetters(['gettersTate'])
  }
}
</script>

<style lang="less" scoped>
.sharelnfo {
  .content {
    padding: 19px @p15;
    .title {
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: left;
      color: #181a39;
      line-height: 25px;
    }
    .other {
      margin-top: 9px;
      margin-bottom: 28px;
      display: flex;
      align-items: center;
      color: #cccccc;
      font-size: 12px;
      .o1 {
        flex: 1;
      }
      .o2 {
        padding-right: 5px;
      }
      .o3 {
        padding-right: 25px;
      }
      .o4 {
        padding-right: 7px;
      }
    }
    .text {
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: justify;
      color: #181a39;
      line-height: 27px;
      letter-spacing: 0px;
    }
  }
  ::v-deep img {
    width: 100%;
  }
  .line {
    height: 10px;
    background-color: #f7f4f5;
  }
  .comment {
    margin-bottom: 60px;
    padding: 25px @p15;
    .comment-title {
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: left;
      color: #222222;
      line-height: 25px;
      letter-spacing: 0px;
      position: relative;
      span {
        position: absolute;
        top: -5px;
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: #b4b4bd;
        line-height: 16px;
        letter-spacing: 0px;
      }
    }
    .item-top {
      display: flex;
      align-items: center;
      color: #cccccc;
      font-size: 12px;
      .c1 {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        margin-right: 10px;
      }
      .c2 {
        flex: 1;
        .top {
          color: #575973;
        }
      }
    }
    .item-content {
      margin-left: 45px;
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: justify;
      color: #181a39;
      line-height: 27px;
      letter-spacing: 0px;
      padding: 9px 0;
    }
    .item-recomment {
      margin-left: 45px;
      background-color: #f7f4f5;
      padding: 15px;
      .name {
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 400;
        text-align: left;
        color: #545671;
        line-height: 20px;
        letter-spacing: 0px;
      }
      .text {
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 400;
        text-align: left;
        color: #62637c;
        line-height: 20px;
        letter-spacing: 0px;
        word-wrap: break-word;
        word-break: break-all;
      }
    }
    .comment-item {
      padding-bottom: 20px;
    }
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0 @p15;
    background-color: #fff;
    .send-comment {
      height: 60px;
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #cccccc;
      .f1 {
        flex: 1;
        height: 34px;
        background: #f7f4f5;
        border-radius: 4px;
        line-height: 34px;
        color: #bcbbc3;
        padding-left: 10px;
      }
      .f2 {
        text-align: center;
        margin-left: 23px;
        .iconfont {
          font-size: 28px;
        }
      }
    }
  }
  .comment-txt {
    padding: @p15;
    .van-field {
      background-color: #f7f4f5;
    }
    .comment-send {
      text-align: right;
      padding-top: 15px;
    }
    .comment-btn {
      color: #ccc;
      font-size: 14px;
    }
  }
  .red {
    color: red !important;
  }
}
</style>
